<template>
        <div class="Bread">
                <el-breadcrumb separator="/">
                        <el-breadcrumb-item>组织管理</el-breadcrumb-item>
                        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
                </el-breadcrumb>
        </div>
        <div class="SearchBox">
                <el-form ref="RuleFormRef" :model="RuleForm" :rules="Rules" label-width="2%" class="demo-ruleForm">
                        <el-form-item prop="SearchRoleData">
                                <el-input class="SearchDataBox" placeholder="请输入角色" v-model="RuleForm.SearchRoleData" />
                        </el-form-item>
                </el-form>
                <div>
                        <el-button type="primary" @click="SubmitForm">
                                搜索
                        </el-button>
                        <el-button type="round" @click="ResetForm">
                                重置
                        </el-button>
                </div>
        </div>
        <div class="NewBtn">
                <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                        新增角色
                </el-button>
                <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="Add-ruleForm"
                                status-icon>
                                <el-form-item label="新增身份" prop="addRole">
                                        <el-select v-model="ruleForm.addRole" placeholder="请选择身份">
                                                <el-option label="学生" value="student" />
                                                <el-option label="老师" value="teacher" />
                                        </el-select>
                                </el-form-item>
                                <el-form-item label="角色描述" prop="describe">
                                        <el-input v-model="ruleForm.describe" type="textarea" />
                                </el-form-item>
                                <el-form-item>
                                        <el-button :plain="true" type="primary" @click="submitForm(ruleFormRef)">
                                                新增
                                        </el-button>
                                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                                </el-form-item>
                        </el-form>
                </el-drawer>
        </div>

        <el-table :data="data" class="DataBox" :header-cell-style="{ background: '#F5F5F5' }"
                :row-style="{ height: 80 + 'px' }">
                <el-table-column prop="roleName" label="角色名称" />
                <el-table-column prop="description" label="角色描述" />
                <el-table-column label="拥有的权限" prop="permissions[0].permissionName">
                        <!-- <template slot-scope="scope">
                                <span>{{ 123 }}</span>
                        </template> -->
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" />
                <el-table-column label="操作">
                        <template #default="scope">
                                <el-button type="primary" @click="Current(scope.$index)">
                                        编辑
                                </el-button>
                                <el-popconfirm @confirm="handleClick(scope.row)" title="您确定要删除吗?">
                                        <template #reference>
                                                <el-button type="danger">删除</el-button>
                                        </template>
                                </el-popconfirm>
                        </template>
                </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="state.totalCount" />
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';

let drawer = ref(false)
const router = useRouter();
//获取el-form的实例对象
const RuleFormRef = ref<FormInstance>()
//表单值
const RuleForm = reactive({
        SearchRoleData: '',
})
const rules = reactive<FormRules>({
        addRole: [
                { required: true, message: '请输入新增角色', trigger: 'change' },
        ],
        describe: [
                { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
})
const Rules = reactive<FormRules>({
        SearchRoleData: { required: true, message: '请输入角色名称' }
})

function SubmitForm() {
        console.log(RuleForm);
}
function ResetForm() {
        RuleForm.SearchRoleData = ""
}
const state = reactive({
        list: [],
        totalCount: 0,
})

let Newdata: Array<String> = []

interface DataType {
        key: string;
        roleName: string;//角色名称
        description?: string;//角色描述
        createDate: string;//角色创建日期
        permissions: { permissionName: string; }[]//角色对应的权限列表
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
        addRole: '',
        describe: '',
})
//模拟的假数据
const data: DataType[] = [
        {
                key: '1',
                roleName: '老师',
                description: "xxxxx",
                createDate: "2018-01-12",
                permissions: [{ permissionName: "新增用户" }, {
                        permissionName:
                                "修改用户"
                }]
        },
        {
                key: '2',
                roleName: '老师',
                description: "xxxxx",
                createDate: "2018-01-12",
                permissions: [{ permissionName: "新增用户" }, {
                        permissionName:
                                "修改用户"
                }]
        },
        {
                key: '3',
                roleName: '学生',
                createDate: "2018-01-12",
                permissions: [{ permissionName: "新增用户" }, {
                        permissionName:
                                "修改用户"
                }]
        },
];
const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
                if (valid) {
                        console.log('ruleForm', ruleForm)
                        ElMessage({
                                message: '添加成功',
                                grouping: true,
                                type: 'success',
                        })
                } else {
                        console.log('error submit!', fields)
                }
        })
}

const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
}
//分页参数
const params = {
        pageNumber: 1,
        pageSize: 5
}
const handleClick = (scoped: any) => {
        console.log('click', scoped)
}
//切换分页
function currentChange(pageNumber: number) {
        console.log("pageNumber", pageNumber)
        params.pageNumber = pageNumber
}
function Current(e: any) {
        console.log(e);

}
</script>
    
<style lang="less" scoped>
.Bread {
        width: 100%;
        height: 5%;
        background-color: #F5F5F5;
        box-sizing: border-box;
}

.SearchBox {
        padding-top: 2%;
        display: flex;
}

.demo-ruleForm {
        width: 20%;
        margin-left: 2%;
        margin-right: 2%;
}

.NewBtn {
        margin-left: 1%;
}

.DataBox {
        display: flex;
        margin-top: 2%;
        margin-left: 2%;
        width: 95%;
}

::v-deep .el-table__header-wrapper {
        thead {
                th {
                        div {
                                font-weight: 500;
                                font-size: 20px;
                                color: black;
                        }
                }
        }
}
</style>